<template>
    <div>
        <el-container>
            <el-aside width="240px">
                <el-row style="width: 240px;">
                    <!-- background-color: #019BA0; -->
                    <el-col :span="24" style="background-color: #01BBA0; width: 240px; height: 35px; text-align:auto; color: #FFFFFF;">
                        <div class="grid-content" style="text-align: left;font-size: 24px;">基础设施目录</div>
                    </el-col>
                    <el-col :span="24" style="background-color: #01BBA0; width: 240px; height: 35px; text-align:auto; color: #FFFFFF;">
                        <div class="grid-content" style="text-align:right; font-size: 24px;"><el-button type="primary" size="mini" @click="addDialogVisible = true">新 增</el-button></div>
                    </el-col>
                    <el-col :span="12">
                        <el-menu default-active="1-1-1" class="menuclass">
                            <el-submenu :index="index + 1 + ''" v-for="(menu, index) in menuList" :key="menu.id">
                                <template slot="title">
                                    <i class="el-icon-user"></i>
                                    <span>{{ menu.name }}</span>
                                </template>
                                <el-submenu :index="(index + 1) + '-' + (index2 + 1)" v-for="(child, index2) in menu.children" :key="child.id">
                                    <template slot="title">
                                        <i class="el-icon-set-up"></i>
                                        <span>{{ child.name }}</span>
                                    </template>
                                    <el-menu-item :index="(index + 1) + '-' + (index2 + 1) + '-' + (index3 + 1)" v-for="(c, index3) in child.children" :key="c.id">
                                        <span @click="getBaseInfo(c.name)">
                                            <router-link to="">{{ c.name }}</router-link>
                                        </span>
                                    </el-menu-item>
                                </el-submenu>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-container>
                <el-main>
                    <div style="margin-bottom: 20px; text-align: left;">
                        <el-row>
                            <el-col :span="18">
                                <div style="text-align: center; margin: 10px; font-size: 20px; color:#019BA0;">
                                    <i class="el-icon-s-home"></i>
                                    <span>设施信息</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-form style="text-align: left;margin-top: 10px;margin-left: 22px;height: 55px;" :inline="true" :model="baseTypeList" class="demo-form-inline">
                            <el-form-item label="基建名称">
                                <el-input v-model="baseTypeList.name" placeholder="基建名称" readonly="true"></el-input>
                            </el-form-item>
                            <el-form-item label="地址">
                                <el-input v-model="baseTypeList.address" placeholder="地址"></el-input>
                            </el-form-item>
                            <el-form-item label="经度">
                                <el-input v-model="baseTypeList.longitude" placeholder="经度"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-form style="text-align: left; margin-left: 22px;" :inline="true" :model="baseTypeList" class="demo-form-inline">
                            <el-form-item label="纬度">
                                <el-input v-model="baseTypeList.latitude" placeholder="纬度"></el-input>
                            </el-form-item>
                            <el-form-item label="投入使用时间">
                                <el-input type="date" style="width: 300px;" v-model="baseTypeList.usetime" placeholder="投入使用时间"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-form style="text-align: left; margin-left: 22px;" :inline="true" :model="baseTypeList" class="demo-form-inline">
                            <el-form-item label="描述">
                                <el-input type="textarea" style="width:300px;" rows="2" v-model="baseTypeList.describe" placeholder="描述"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <!-- <el-button type="primary" @click="updateBaseType">修 改</el-button> -->
                            </el-form-item>
                        </el-form>
                    </div>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>

        <el-dialog title="添加基建设施" :visible.sync="addDialogVisible" style="text-align: left; margin-left: 20%; width: 65%;">
            <el-row>
                <el-col :span="20" :offset="2">
                    <el-form :model="oneBase" label-width="80px" style="margin-top: 30px;">
                        <el-form-item label="上级设施" prop="baseid" :label-width="formLabelWidth">
                            <el-select v-model="oneBase.baseid" placeholder="请选择上级设施">
                                <el-option label="陕西自来水公司" value="1"></el-option>
                                <el-option label="泵站" value="2"></el-option>
                                <el-option label="监测点" value="3"></el-option>
                                <el-option label="二次供水设备" value="4"></el-option>
                                <el-option label="测流点" value="5"></el-option>
                                <el-option label="测压点" value="6"></el-option>
                                <el-option label="清水池" value="7"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
                            <el-input v-model="oneBase.name"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" :label-width="formLabelWidth">
                            <el-input v-model="oneBase.address"></el-input>
                        </el-form-item>
                        <el-form-item label="经度" :label-width="formLabelWidth">
                            <el-input v-model="oneBase.longitude"></el-input>
                        </el-form-item>
                        <el-form-item label="纬度" :label-width="formLabelWidth">
                            <el-input v-model="oneBase.latitude"></el-input>
                        </el-form-item>
                        <el-form-item label="投入使用时间" :label-width="formLabelWidth">
                            <el-input type="date" v-model="oneBase.usetime"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="oneBase.describe"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addBase()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            baseTypeList: {},
            addDialogVisible: false,
            formLabelWidth: '120px',
            oneBase: {},
            menuList: []
        }
    },
    methods: {
        addBaseStock() {
            this.$axios.post("/base/insertBaseStock", this.oneBaseStock)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: result.data.message
                        });
                        this.showList();
                        this.dialogFormVisible = false;
                        this.oneBaseStock = {};
                    } else {
                        this.$message.error(result.data.message);
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        updateBaseType() {
            this.$axios.put("/base/updateBaseTypeById", this.baseTypeList)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: result.data.message
                        });
                        this.showList();
                    } else {
                        this.$message.error(result.data.message);
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        getBaseInfo(name) {
            this.$axios.get("/base/selectBaseTypeByName?name=" + name)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.baseTypeList = result.data.data;
                        this.baseTypeList.usetime = result.data.data.usetime.substring(0, 10);
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        addBase() {
            this.$axios.get("/base/insertBase?baseid=" + this.oneBase.baseid + "&name=" + this.oneBase.name + "&address=" + this.oneBase.address + "&longitude=" + this.oneBase.longitude + "&latitude=" + this.oneBase.latitude + "&usertime=" + this.oneBase.usertime + "&describe=" + this.oneBase.describe)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.$message({
                            message: "添加成功",
                            type: "success"
                        });
                        this.addDialogVisible = false;
                        this.showMenu();
                    } else {
                        this.$message.error(message);
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        showMenu() {
            this.$axios.get("/base/selectBaseAll")
                .then((result) => {
                    if (result.data.code == 200) {
                        this.menuList = result.data.data;
                    }
                }).catch((err) => {
                    console.log(err);
                });
        }
    },
    mounted() {
        this.$axios.get("/base/selectBaseAll")
            .then((result) => {
                if (result.data.code == 200) {
                    this.menuList = result.data.data;
                }
            }).catch((err) => {
                console.log(err);
            });
    },
};
</script>

<style>
* {
    text-decoration: none;
}
</style>
